<template>
    <tableModule
        :table-data="tableData"
        :table-json="tableJson"
    />
    单选
    <tableModule
        :table-data="tableData"
        :table-json="checkedTableJson"
        is-radio
        @select-table="selectTable"
    />
    多选
    <tableModule
        :table-data="tableData"
        :table-json="checkedTableJson"
        :selectable-ids="[3]"
        @select-table="selectTable"
    />
    树形
    <tableModule
        :table-data="treeTable"
        :table-json="treeJson"
        :operate-status="2"
    />
</template>

<script setup>
const tableData = [{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state: '未登记',
    id: 2
},
{
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state: '未登记',
    id: 4
},
{
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state: '未登记',
    id: 3
},
{
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
    state: '已登记',
    id: 6
}]
const tableJson = {
    tableFrom: [
        {
            prop: 'date',
            type: 'text',
            label: '日期'
        },
        {
            prop: 'name',
            type: 'text',
            label: '名字'
        },
        {
            prop: 'address',
            type: 'text',
            label: '地址'
        },
        {
            prop: 'state',
            type: 'tag',
            label: '状态',
            cellType: {
                '已登记': 'success',
                '未登记': 'danger'
            }
        }
    ],
    operate: [
        {
            text: '编辑',
            banType: {
                state: '已登记'
            }
        },
        {
            text: '详情',
            type: 'popover',
            buttonList: [
                {
                    text: '编辑',
                    banType: {
                        state: '已登记'
                    }
                }
            ]
        }
    ]
}
const checkedTableJson = {
    tableFrom: [
        {
            prop: 'date',
            type: 'text',
            label: '日期'
        },
        {
            prop: 'name',
            type: 'text',
            label: '名字'
        },
        {
            prop: 'address',
            type: 'text',
            label: '地址'
        },
        {
            prop: 'state',
            type: 'tag',
            label: '状态',
            cellType: {
                '已登记': 'success',
                '未登记': 'danger'
            }
        }
    ],
    operate: [
        {
            text: '编辑',
            banType: {
                state: '已登记'
            }
        },
        {
            text: '详情'
        }
    ],
    hasSelection: true
}
const treeTable = [
    {
        id: 1,
        date: '2016-05-02',
        name: 'wangxiaohu'
    },
    {
        id: 2,
        date: '2016-05-04',
        name: 'wangxiaohu'
    },
    {
        id: 3,
        date: '2016-05-01',
        name: 'wangxiaohu',
        children: [
            {
                id: 31,
                date: '2016-05-01',
                name: 'wangxiaohu'
            },
            {
                id: 32,
                date: '2016-05-01',
                name: 'wangxiaohu',
                children: [
                    {
                        id: 50,
                        date: '2016-05-01',
                        name: 'wangxiaohu'
                    },
                    {
                        id: 63,
                        date: '2016-05-01',
                        name: 'wangxiaohu'
                    }
                ]
            }
        ]
    },
    {
        id: 4,
        date: '2016-05-03',
        name: 'wangxiaohu'
    }
]
const treeJson = {
    tableFrom: [
        {
            prop: 'date',
            type: 'text',
            label: '日期',
            showOverflowTooltip: true
        },
        {
            prop: 'name',
            type: 'text',
            label: '名字'
        },
        {
            prop: 'address',
            type: 'text',
            label: '地址'
        }
    ],
    operate: [
        {
            text: '编辑',
            banType: {
                state: '已登记'
            }
        },
        {
            text: '详情'
        }
    ]
}
const selectTable = (e) => {
    console.log(e);
}
</script>

<style lang="scss" scoped>

</style>